<template>
	<view class="threed-container">
	<view class="threed-box" :class="{'moving':!isHandMove}"  @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove" :style="{'transform':'rotateY('+rotateX+'deg)','-webkit-transform':'rotateY('+rotateX+'deg)'}">
		<view class="threed-side con1">
			<image class="cover-image" mode="aspectFit" :src="imgUrl" :draggable="false"></image>
			<image class="kuang-image" mode="scaleToFill" src="https://imgcdn.ecbao.cn/nft/assets/threed_kuang.png"
				:draggable="false"></image>
		</view>
		<view class="threed-side con2">
			<image class="bg-image" mode="aspectFit" src="https://qiniu.wiod.cn/detail%2Fea6d4ddf165eef072cfdc2518e2f3d9.jpg"
				:draggable="false"></image>
			<image class="kuang-image" mode="scaleToFill" src="https://imgcdn.ecbao.cn/nft/assets/threed_kuang.png"
				:draggable="false"></image>
		</view>
		<view class="threed-side con3"></view>
		<view class="threed-side con4"></view>
		<view class="threed-side con5"></view>
		<view class="threed-side con6"></view>
		<view class="threed-side con7"></view>
		<view class="threed-side con8"></view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "threed-image",
		props: {
			imgUrl: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				startX:'',
				isHandMove:false,//手动转动
				rotateX:0,
			};
		},
		methods:{
			touchStart(e){
				e.preventDefault()
				this.startX = e.touches[0].pageX;
				this.isHandMove = true;
			},
			touchMove(e){
			    e.preventDefault()
				let endX = e.changedTouches[0].pageX
				let moveX = endX - this.startX;
				this.rotateX = moveX;
			},
			touchEnd(e){
				this.rotateX = 0;
				this.isHandMove = false;
			},
		}
	}
</script>

<style scoped>
	.threed-container{
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
		transform: translateY(-50%) translateX(-50%);
	}
	.threed-box {
		width: 460rpx;
		height: 460rpx;
		margin: 20rpx auto 0;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-perspective: 2000;
		perspective: 2000;
		transform-origin: center center;
	}

	.threed-box.moving {
		-webkit-animation: collectRotate 20s infinite linear;
		animation: collectRotate 20s infinite linear;
	}

	.threed-box .threed-side {
		width: 460rpx;
		height: 460rpx;
		text-align: center;
		-webkit-perspective: 2000;
		perspective: 2000;
		background-color: #1d1d27;
		position: absolute;
		left: 0;
		top: 0;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		box-sizing: border-box;
	}

	.threed-box .con1 {
		position: relative;
		background-color: #1d1d27;
		display: flex;
		justify-content: center;
		-webkit-transform: translateZ(18rpx);
		transform: translateZ(18rpx);
	}

	.threed-box .con2 {
		background: #1d1d27;
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-transform: translateZ(-18rpx) rotateY(180deg);
		transform: translateZ(-18rpx) rotateY(180deg);
	}
	
	.threed-box .cover-image,
	.threed-box .bg-image{
		position: absolute;
		top: 50%;
		left:50%;
		-webkit-transform:translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		width: 435rpx;
		height: 435rpx;
	}
	
	.kuang-image {
		display: inline-block;
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.threed-box .con3 {
		height: 38rpx;
		background: linear-gradient(180deg, #4c4648, #2d292b);
		-webkit-transform: translateY(-19rpx) rotateX(90deg);
		transform: translateY(-19rpx) rotateX(90deg);
	}

	.threed-box .con4 {
		height: 38rpx;
		background:linear-gradient(180deg, #4c4648, #2d292b);
		-webkit-transform:translateY(441rpx) rotateX(-90deg);
		transform:translateY(441rpx) rotateX(-90deg);
	}

	.threed-box .con5 {
		width: 38rpx;
		background: linear-gradient(180deg, #4c4648, #2d292b);
		-webkit-transform:translateX(-19rpx) rotateY(-90deg);
		transform:translateX(-19rpx) rotateY(-90deg);
	}

	.threed-box .con6 {
		width: 38rpx;
		border: 0 solid #000;
		background: linear-gradient(180deg, #4c4648, #2d292b);
		-webkit-transform:translateX(441rpx) rotateY(90deg);
		transform:translateX(441rpx) rotateY(90deg);
	}

	.threed-box .con7,
	.threed-box .con8 {
		width: 500rpx;
		height: 500rpx;
		border: 4rpx solid rgb(230, 228, 228);
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		justify-content: center;
		-webkit-transform: translate3d(-20rpx, -20rpx, 0);
		transform: translate3d(-20rpx, -20rpx, 0);
		border-radius: 40rpx;
	}

	.threed-box .con8 {
		-webkit-transform: translate3d(-20rpx, -20rpx, 0) rotateY(180deg);
		transform: translate3d(-20rpx, -20rpx, 0) rotateY(180deg);
	}

	@-webkit-keyframes collectRotate {
		from {
			-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		to {
			-webkit-transform: rotateY(1turn);
			transform: rotateY(1turn);
		}
	}

	@keyframes collectRotate {
		from {
			-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		to {
			-webkit-transform: rotateY(1turn);
			transform: rotateY(1turn);
		}
	}
</style>
